<template>
  <view class="plr-30">
    <u-tabs
      font-size="26"
      class="mb-20"
      active-color="#e66633"
      inactive-color="#3c3c3c"
      bg-color="transparent"
      :list="tabs"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs>
    <!-- 列表 -->
    <empty v-if="list.length == 0"></empty>
    <view
      class="plr-30 bg-1 ptb-30 radius-40 mb-30 size-22 flex flex-top flex-start"
      v-else
      v-for="(item, index) in list"
      :key="index"
    >
      <image class="collectImg radius-40 mr-20" :src="item.image" mode="aspectFill"></image>
      <view style="width: 72%" class="white">
        <view class="size-30 mb-40 red">
          {{ item.name }}
        </view>
        <view class="flex flex-between">
          <view class="size-30"> ￥{{ item.price }} </view>
          <view class="size-28 red">
            <view class="red" v-if="item.status == 0"> 锻造失败 </view>
            <!-- <view class="red" v-if="item.status == 1"> 待领取 </view> -->
            <!-- <view class="red" v-if="item.status == 2"> 待发放 </view> -->
            <!-- <view class="red" v-if="item.status == 3"> 已领取 </view> -->
          </view>
        </view>
        <view
          class="flex mt-40 btnWrap"
          style="float: right"
          v-if="item.status == 1"
        >
          <!-- <u-button
            hover-class="none"
            class="exchangeBtn"
            @click="toExchange(item.id)"
          >
            兑换领取</u-button
          > -->
        </view>
      </view>
    </view>
    <!-- 填写信息 -->
    <u-popup
      @close="closePop"
      v-model="exchangeShow"
      mode="center"
      class="bg"
      border-radius="30"
      width="630rpx"
    >
      <view class="plr-30 ptb-30 bg size-28 white">
        <view class="text-center"> 填写地址 </view>
        <view class="popTitle mtb-20 pl-20"> 收件人 </view>
        <u-field
          v-model="name"
          :border-bottom="false"
          label-width="0"
          placeholder-style="color:#999"
          placeholder="请输入收件人姓名"
        >
        </u-field>
        <view class="popTitle mtb-20 pl-20"> 收件人电话 </view>
        <u-field
          v-model="phone"
          :border-bottom="false"
          label-width="0"
          placeholder-style="color:#999"
          placeholder="请输入收件人电话"
        >
        </u-field>
        <view class="popTitle mtb-20 pl-20"> 收件人地址 </view>
        <u-field
          @click="regionShow = true"
          v-model="city"
          :disabled="true"
          :border-bottom="false"
          label-width="0"
          placeholder-style="color:#999"
          placeholder="请选择收件人地址"
        >
        </u-field>
        <view class="popTitle mtb-20 pl-20"> 收件人详细地址 </view>
        <u-field
          v-model="address"
          :border-bottom="false"
          label-width="0"
          placeholder-style="color:#999"
          placeholder="请输入收件人详细地址"
        >
        </u-field>
        <u-button
          type="primary"
          hover-class="none"
          style="width: 570rpx; margin-top: 40rpx"
          @click.stop="submit"
        >
          确认</u-button
        >
      </view>
    </u-popup>
    <u-picker
      mode="region"
      v-model="regionShow"
      @confirm="submitAddress"
    ></u-picker>
  </view>
</template>

<script>
import empty from "../../components/empty.vue";
export default {
  components: {
    empty,
  },
  data() {
    return {
      tabs: [
        {
          name: "全部",
        },
        {
          name: "合成失败",
        },
        {
          name: "合成成功",
        },
        // {
        //   name: "待领取",
        // },
        // {
        //   name: "待发放",
        // },
        // {
        //   name: "已领取",
        // },
      ],
      current: 0,
      status: "",
      city: "",
      address: "",
      regionShow: false,
      failShow: false,
      successShow: false,
      name: "",
      phone: "",
      list: [],
      exchangeId: "",
      exchangeShow: false,
    };
  },
  onShow() {
    this.init();
  },
  methods: {
    change(index) {
      this.current = index;
      if (index == 0) {
        this.status = "";
      } else {
        this.status = Number(index - 1);
      }
      this.init();
    },
    // 选择地区
    submitAddress(item) {
      this.city = item.province.label + item.city.label + item.area.label;
    },
    // 关闭兑换弹框
    closePop() {
      this.exchangeShow = false;
    },
    toExchange(id) {
      this.exchangeShow = true;
      this.exchangeId = id;
    },
    // 确认兑换
    submit() {
      if (this.name == "") {
        uni.showToast({
          title: "请输入收件人姓名",
          icon: "none",
        });
        return;
      }
      if (this.phone == "") {
        uni.showToast({
          title: "请输入收件人手机号码",
          icon: "none",
        });
        return;
      }
      if (this.city == "") {
        uni.showToast({
          title: "请选择收件人地址",
          icon: "none",
        });
        return;
      }
      if (this.address == "") {
        uni.showToast({
          title: "请输入收件人详细地址",
          icon: "none",
        });
        return;
      }
      this.$http("api/forge/apply", {
        name: this.name,
        phone: this.phone,
        id: this.exchangeId,
        city: this.city,
        address: this.address,
      }).then((res) => {
        uni.showToast({
          title: "领取成功!",
          icon: "none",
        });
        this.current = 3;
        this.status = 2;
        this.exchangeShow = false;
        this.init();
      });
    },
    init() {
      this.list = [];
      this.$http("api/forge/forgeRecord", {
        status: this.status,
      }).then((res) => {
        this.list = res;
      });
    },
  },
};
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="less" scoped>
  .white {
    color: #3c3c3c;
  }
	/deep/ .u-tab-bar {
		background: linear-gradient(90deg, #EEA634, #DE2D32);
	}
.homeImg {
  width: 342rpx;
  height: 60rpx;
}

.collectImg {
  width: 150rpx;
  height: 150rpx;
}

.homeIcon {
  width: 30rpx;
  height: 30rpx;
}

.exchangeBtn {
  width: 173rpx;
  height: 60rpx !important;
  padding: 0 20rpx;
  // background: #efaa1c;
  background: #EFE0C0;
  border-radius: 30rpx;
  color: #2f2f2e;
  font-size: 26rpx;
}

.popTitle {
  position: relative;

  &::after {
    position: absolute;
    left: 0;
    top: 6rpx;
    display: block;
    content: "";
    width: 10rpx;
    height: 28rpx;
    background: #EFE0C0;
    border-radius: 5rpx;
  }
}

/deep/ .u-field {
  color: #fff !important;
  font-size: 26rpx;
  background: #2f2f2e;
  border-radius: 20rpx;
}

/deep/ .u-mode-center-box {
  background-color: transparent;
}
</style>
